<template>
  <div class="boxRrap animate__animated animate__bounce animate__zoomIn " :class="props.wordPic ? 'flexrow' : ''">
    <el-card class="box-card w-full h-full">
      <template #header>
        <div class="card-header flex justify-center items-center">
          <span>{{ props.title }}</span>
          <div class="btnWrap ml-auto">
            <el-button v-if="!fullscreen" class="mr-auto" @click.capture="handleClick" icon="Position" circle></el-button>
            <el-button v-else class="mr-auto" @click.capture="handleClick" icon="close" circle></el-button>
          </div>
        </div>
      </template>
      <div v-for="(o, i) in props.itemsList" :key="o" class="text item flex text-[#888888] p-1 text-xl">
        <div class=" flex flex-col justify-center items-start ">
          <p v-if="!props.wordPic" class="title">{{ o.title }}</p>
          <div class="elseWrap  flex flex-col justify-center items-center cursor-pointer"
            :class="i > 0 ? 'cursor-not-allowed' : ''"  v-else>
            <img class="scale-85 w-full h-auto " @click="o.click" :src="o.img" alt="p1">
            <p>{{ o.title }}</p>
          </div>
        </div>
      </div>
      <template #footer>Footer content</template>
    </el-card>
  </div>
</template>

<script lang="ts" setup>
import { Close, Position } from '@element-plus/icons-vue'
let fullscreen = ref(false)
interface Props {
  title?: string
  wordPic?: Boolean
  itemsList?: any[]
  clickFor?: Function | String
}
let buttons = [
  {
    title: 'spred',
    icon: 'Position',
    click: 'Spred'
  },
  {
    title: "close",
    icon: 'close',
    click: 'close'
  },
]
let props = withDefaults(defineProps<Props>(), {
  title: '',
  itemsList: [] as any,
  clickFor: () => {}
})
const toHome = (p: string) => {

}
const handleClick = (e) => {
  function fc(element) {
    // console.log(element)
    if (fullscreen.value) {
      element.classList.remove('spred')
      if (element.parentNode.classList.contains('mr-8')) {
        element.parentNode.classList.add('-translate-x-1/2')
      }
      element.classList.add('close')
    } else {
      element.classList.remove('close')
      if (element.parentNode.classList.contains('-translate-x-1/2')) {
        element.parentNode.classList.remove('-translate-x-1/2')
      }
      element.classList.add('spred')
    }
  }
  const dom = e.target
  if (dom.localName == 'svg') {
    let el = dom.parentNode.parentNode
    fc(el.parentNode.parentNode.parentNode.parentNode)
  } else if (dom.localName == 'button') {
    fc(dom.parentNode.parentNode.parentNode.parentNode)
  }
  fullscreen.value = !fullscreen.value
}
onMounted(() => {

})
</script>

<style lang='scss'>
.elseWrap:hover {
  box-sizing: border-box;
  border-radius: 8px;
  box-shadow: 0 0 2px 3px hsl(0, 4%, 91%);
}

.flexrow {
  .el-card__body {
    display: flex;
    align-items: center;
    gap: 8px;
  }
}

.boxRrap .close {
  transition: all 0.2s;
  animation: close;
  animation-duration: 0.05s;
}

@keyframes spread {
  0% {
    transform: scale(0.9);
  }

  100% {
    transform: scale(1);
  }
}

@keyframes close {
  0% {
    transform: scale(1.1);
  }

  100% {
    transform: scale(1);
  }
}

.boxRrap .spred {
  z-index: 9999;
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0px;
  top: 0px;
  animation: spread;
  animation-duration: 0.05s;
}
</style>